<template>
  <div class="error-container">
    <div class="error-box center-flex">
      <img
        src="https://img1.halobear.com/temp/e068d6c3ac0c806bf51c46b290cba5fe.png"
        alt
        class="img"
        v-if="error.statusCode === 404"
      />
      <h1 v-else class="error-Text">
        {{ error.statusCode || 500 }}
      </h1>
      <div class="title">抱歉，您访问的页面出错了</div>
      <div class="subtitle">提示：您可能输错了网址，或该页面已删除或不存在</div>
      <div v-if="$route.name === 'index'" @click="onreload" class="back center-flex">返回首页</div>
      <router-link class="back center-flex" v-else :to="{ name: 'index' }">返回首页</router-link>
    </div>
  </div>
</template>

<script>
export default {
  props: ['error'],
  layout: 'blog',
  methods: {
    onreload() {
      window.location.reload();
    },
  },
  head() {
    return {
      title: '幻熊结婚圈',
      meta: [
        { name: 'referrer', content: 'no-referrer' },
        {
          hid: 'keywords',
          name: 'keywords',
          content: '',
        },
        {
          hid: 'description',
          name: 'description',
          content: '',
        },
      ],
    };
  },
};
</script>

<style lang='less' scoped>
.error-container {
  background: #eff1f4;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  .error-box {
    flex-direction: column;
  }
  .error-Text {
    font-weight: bold;
    font-size: 100px;
    line-height: 2;
    color: white;
    text-shadow: 0 0 5px @error;
    letter-spacing: 10px;
  }
  .img {
    width: 336px;
    height: 290px;
    margin-bottom: 60px;
  }
  .img500 {
    width: 375px;
    height: 84px;
    margin-bottom: 80px;
  }
  .title {
    font-size: 20px;
    font-weight: 600;
    color: #323038;
    line-height: 28px;
    margin-bottom: 10px;
  }
  .subtitle {
    font-size: 14px;
    font-weight: 400;
    color: #68676c;
    line-height: 20px;
    margin-bottom: 30px;
  }
  .back {
    width: 140px;
    height: 42px;
    background: #0185f2;
    border-radius: 3px;
    font-size: 16px;
    font-weight: 500;
    color: #ffffff;
    line-height: 22px;
    cursor: pointer;
  }
}
@media screen and (max-width: @mobile-width) {
  .error-container {
    background: #eff1f4;
    height: 100vh;
    .error-box {
      padding-top: 70px;
      flex-direction: column;
    }
    .img {
      width: 200px;
      height: 172px;
      margin-bottom: 30px;
    }
    .img500 {
      width: 220px;
      height: 50px;
      margin-bottom: 50px;
    }
    .title {
      font-size: 16px;
      font-weight: 600;
      color: #323038;
      line-height: 20px;
      margin-bottom: 15px;
    }
    .subtitle {
      font-size: 14px;
      font-weight: 400;
      color: #68676c;
      line-height: 18px;
      margin-bottom: 15px;
    }
    .back {
      width: 140px;
      height: 42px;
      background: #0185f2;
      border-radius: 3px;
      font-size: 16px;
      font-weight: 500;
      color: #ffffff;
      line-height: 22px;
      cursor: pointer;
    }
  }
}
</style>
